<template>
  <div class="comment">
    <div class="comment-card" v-for="(item,index) in goodsList" :key="index">
      <van-card :tag="item.type" :price="item.price" :desc="item.represent" :title="item.goodsName"
        :thumb="$baseUrl + item.pic">
        <template #tags>
          <van-tag plain type="danger">{{item.type}}</van-tag>
        </template>
        <template #footer>
          <div class="footer" style="height:60px;">
            <van-rate v-model="item.rate" />
          </div>
        </template>
      </van-card>
      <div class="userComment">
        <div class="userInfo">
          <img :src="$baseUrl + baseUserInfo.avatar" alt="" style="width:50px;height:50px;border-radius:50%;">
          <div class="username">{{baseUserInfo.username}}</div>
        </div>
        <div class="buttons">
          <el-input v-model="item.content" placeholder="发布一条评论给大家看看吧~"></el-input>
          <van-button type="primary" size="mini" style="height:30px;width:80px;" @click="submit(item)">发布评论</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectAllGoodsByGoodsId, selectUserBaseInfoById, subComment, updateOrderStatus, getProductById } from '@/request/api.js'
export default {
  data() {
    return ({
      goodsList: [],
      baseUserInfo: {},
      orderId: 0,
    })
  },
  mounted() {
    this.getBaseUserInfo()
    let { goodsIdList, id, goodsId } = JSON.parse(this.$route.query.commentData)
    this.orderId = id
    goodsIdList = JSON.parse(goodsIdList)
    if (goodsIdList != null) {
      selectAllGoodsByGoodsId(goodsIdList).then(res => {
        if (res.data) {
          res.data.forEach(item => {
            item.rate = 5
            item.content = ''
          })
          this.goodsList = res.data
        }
      })
    } else {
      getProductById({ id: goodsId }).then(res => {
        res.data.rate = 5
        res.data.content = ''
        this.goodsList.push(res.data)
      })
    }
  },
  methods: {
    submit(item) {
      if (item.content == '') {
        this.$toast.fail('请先输入评论内容')
        return
      }
      let data = {
        id: null,
        content: item.content,
        username: this.baseUserInfo.username,
        userId: localStorage.getItem('userId'),
        avatar: this.baseUserInfo.avatar,
        rate: item.rate,
        goodsId: item.id,
        createTime: null,
        pid: null
      }
      subComment(data).then(res => {
        this.goodsList.forEach((iitem, index) => {
          if (iitem == item) this.goodsList.splice(index, 1)
        })
        this.$toast.success('评论成功~')
        if (this.goodsList.length == 0) {
          if (!JSON.parse(this.$route.query.isAdd)) {
            updateOrderStatus(this.orderId).then(res => {
            this.$router.back();
            })
          }
        }
      })
    },
    getBaseUserInfo() {
      selectUserBaseInfoById(localStorage.getItem('userId')).then(res => {
        if (res.data) {
          this.baseUserInfo = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.buttons {
  display: flex;
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 250px;
}

::v-deep .el-input .el-input__inner {
  height: 30px !important;
}

.comment-card .van-card {
  border-radius: 15px;
}

::v-deep .van-rate {
  margin-top: 10px;
  ;
}

.userInfo {
  display: flex;
}

.userComment {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 20px;
  width: 320px;
}

.comment-card {
  position: relative;
  border: 2px solid #9370DB;
  margin: 10px 0;
  border-radius: 15px;
}

.comment {
  margin-top: 45px;
  padding: 10px;
}
</style>